<template>
  <view class="u-page__item" v-if="tabbar && tabbar.list.length > 0">
    <su-tabbar
      :value="path"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
      :inactiveColor="tabbar.inactiveColor"
      :activeColor="tabbar.activeColor"
      :midTabBar="tabbar.mode === 2"
    >
      <su-tabbar-item
        v-for="(item, index) in tabbar.list"
        :key="item.text"
        :text="item.text"
        :name="item.url"
        :isCenter="getTabbarCenter(index)"
        :centerImage="item.inactiveIcon"
        @click="go(item.url)"
      >
        <template v-slot:active-icon>
          <image class="u-page__item__slot-icon" mode="widthFix" :src="item.activeIcon"></image>
        </template>
        <template v-slot:inactive-icon>
          <image class="u-page__item__slot-icon" mode="widthFix" :src="item.inactiveIcon"></image>
        </template>
      </su-tabbar-item>
    </su-tabbar>
  </view>
</template>

<script>
	import suTabbar from '../su-tabbar/su-tabbar.vue';
	import suTabbarItem from '../su-tabbar-item/su-tabbar-item.vue';
	import throttle from '@/common/helper/throttle';
	export default {
		components: {
			suTabbar,
			suTabbarItem
		},
		props: {
			path: String,
		},
		data() {
			return {
				
			}
		},
		computed: {
			userType() {
				return 2
			},
			tabbar() {
				return this.userType == 1 ? {
			"mode": 1,
			"layout": 1,
			"inactiveColor": "#a6a6a6",
			"activeColor": "#1199eb",
			"list": [
				{
					"inactiveIcon": "/static/icon_home.png",
					"activeIcon": "/static/icon_home_active.png",
					"url": "/pages/index/index",
					"text": "首页"
				},
				{
					"inactiveIcon": "/static/icon_supply.png",
					"activeIcon": "/static/icon_supply_active.png",
					"url": "/pages/index/market",
					"text": "货源"
				},
				{
					"inactiveIcon": "/static/icon_mine.png",
					"activeIcon": "/static/icon_mine_active.png",
					"url": "/pages/index/mine",
					"text": "我的"
				},
			],
			"background": {
				"type": "color",
				"bgImage": "",
				"bgColor": "#ffffff"
			}
		} : this.userType == 2 ? {
			"mode": 1,
			"layout": 1,
			"inactiveColor": "#a6a6a6",
			"activeColor": "#1199eb",
			"list": [
				{
					"inactiveIcon": "/static/icon_ship.png",
					"activeIcon": "/static/icon_ship_active.png",
					"url": "/pages/ship/index/task",
					"text": "任务"
				},
				{
					"inactiveIcon": "/static/icon_mine.png",
					"activeIcon": "/static/icon_mine_active.png",
					"url": "/pages/ship/index/mine",
					"text": "我的"
				},
			],
			"background": {
				"type": "color",
				"bgImage": "",
				"bgColor": "#ffffff"
			}
		} : undefined
			}
		},
		methods: {
			getTabbarCenter() {
				if (this.tabbar.mode !== 2) return false;
				return this.tabbar.list % 2 > 0
				  ? Math.ceil(this.tabbar.list.length / 2) === index + 1
				  : false;
			},
			go(...args) {
				throttle(() => {
				  this._go(...args);
				});
			},
			_go(path) {
				console.log(path)
				if (path !== this.path) {
					uni.reLaunch({
					  url: path,
					});
				}
			  // uni.switchTab({
			  //   url: path,
			  // });
			}
		}
	}
</script>

<style lang="scss">
  .u-page {
    padding: 0;

    &__item {
      &__title {
        color: var(--textSize);
        background-color: #fff;
        padding: 15px;
        font-size: 15px;

        &__slot-title {
          color: var(--textSize);
          font-size: 14px;
        }
      }

      &__slot-icon {
        width: 25px;
        height: 25px;
      }
    }
  }
</style>
